import React from 'react';
import { Card, Col, Row } from 'antd';
// import ReactEcharts from 'echarts-for-react';
// import ReactEChartsCore from 'echarts-for-react/lib/core';
// import * as echarts from 'echarts/core';
import { Button } from '../../../node_modules/git1/src/index';
import ReactEcharts from '@/style/reactEcharts';
import styles from './index.less';
import {
  pieOptions,
  lineOptions,
  radarOPtions,
  EachPillUpOption,
  doubleBarOptions,
  YBarOPtions,
} from './mock';
import { graphOption } from './graphMock';
const Dashboard = () => {
  return (
    <div className={styles.wrapper}>
      <Button></Button>
      <Row gutter={12}>
        <Col span={5}>
          <Card className={styles.card}>
            <p className={styles.title}>待我审批</p>
            <p className={`${styles.text} ${styles.orange}`}>2</p>
          </Card>
        </Col>
        <Col span={5}>
          <Card className={styles.card}>
            <p className={styles.title}>本周登录次数</p>
            <p className={`${styles.text} ${styles.gray}`}>5</p>
          </Card>
        </Col>
        <Col span={14}>
          <div className={styles.image}></div>
        </Col>
      </Row>
      <div className={styles.chartWrapper}>
        <Row gutter={12}>
          <Col span={10}>
            <Card className={styles.chart}>
              {/* <ReactEChartsCore echarts={echarts} option={pieOptions} /> */}
              <ReactEcharts option={pieOptions} />
            </Card>
          </Col>
          <Col span={14}>
            <Card className={styles.chart}>
              <ReactEcharts option={lineOptions} />
            </Card>
          </Col>
        </Row>
        <Row gutter={12}>
          <Col span={10}>
            <Card className={styles.chart}>
              {/* <ReactEChartsCore echarts={echarts} option={radarOPtions} /> */}
              <ReactEcharts option={radarOPtions} />
            </Card>
          </Col>
          <Col span={14}>
            <Card className={styles.chart}>
              <ReactEcharts option={EachPillUpOption} />
            </Card>
          </Col>
        </Row>
        <Row gutter={12}>
          <Col span={10}>
            <Card className={styles.chart}>
              <ReactEcharts option={doubleBarOptions} />
            </Card>
          </Col>
          <Col span={14}>
            <Card className={styles.chart}>
              <ReactEcharts option={YBarOPtions} />
            </Card>
          </Col>
        </Row>
        <Row gutter={12}>
          <Col span={24}>
            <Card className={styles.chart}>
              <ReactEcharts option={graphOption} />
            </Card>
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default Dashboard;
